/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Grid, Form, Button, Transfer } from '@alifd/next';
import { ApiOfResourceGet } from '#/utils/coreApiDefine'

const { Row, Col } = Grid;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { xxs: 6, s: 3, l: 4 },
  wrapperCol: { s: 12, l: 12 }
};

export default class EditLinkageMetric extends Component {
  static displayName = 'EditLinkageMetric';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      metrics: [],
      controlUsageMetrics: [],
      cancelUsageMetrics: [],
    };
  }

  componentDidMount() {
    ApiOfResourceGet(this.props.resourceInstance.resourceCode).then(response => {
      const { data } = response;
      let groups = data.metricGroups.filter(it => 'CONTROL' === it.usageType)
      if(groups.length > 0 && groups[0].metrics.length > 0 ) {
        let metrics = groups[0].metrics.map(v => {return {label: v.name, value: v.code}});
        this.setState({
          metrics: metrics,
        });
      }
    }).catch(error => {
      console.log(error);
    })
  }

  handleControlUsageMetricsChange = (value, data, extra) => {
    this.setState({
      controlUsageMetrics: value
    });
  }

  handleCancelUsageMetricsChange = (value, data, extra) => {
    this.setState({
      cancelUsageMetrics: value
    });
  }

  validateAllFormField = () => {
    let controlUsageMetrics = this.state.controlUsageMetrics.join(',');
    let cancelUsageMetrics = this.state.cancelUsageMetrics.join(',');
    this.props.submitCallback(controlUsageMetrics, cancelUsageMetrics)
  }

  render() {
    return (
      <div className="settings-form">
        <IceContainer>
            <div style={styles.formContent}>
              <FormItem size="medium" {...formItemLayout}>
                <Transfer value={this.state.controlUsageMetrics} dataSource={this.state.metrics} onChange={this.handleControlUsageMetricsChange} titles={['可选指标', '控制指标']} />
              </FormItem>
              <FormItem size="medium" {...formItemLayout}>
                <Transfer value={this.state.cancelUsageMetrics} dataSource={this.state.metrics}  onChange={this.handleCancelUsageMetricsChange} titles={['可选指标', '解除控制指标']} />
              </FormItem>
              <Row style={{ marginTop: 20 }}>
                <Col offset="3">
                  <Button
                    size="medium"
                    type="primary"
                    onClick={this.validateAllFormField}
                  >
                    确 定
                  </Button>
                </Col>
              </Row>
            </div>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  label: {
    textAlign: 'right',
  },
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    alignItems: 'center',
    marginBottom: 25,
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};
